<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas id="main"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;

            var renderer = new clay.Renderer({
                canvas : document.getElementById('main')
            });
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                    aspect : renderer.getViewportAspect(),
                    far : 500
                });
            renderer.resize(window.innerWidth, window.innerHeight);

            camera.position.set(0, 1, 2);

            var texture = new clay.Texture2D({
                flipY : false
            });
            // Sky texture
            // http://www.hdri-hub.com/hdrishop/freesamples/freehdri/item/113-hdr-111-parking-space-free
            texture.load('assets/textures/Parking_Lot_Bg.jpg');

            var skydome = new clay.plugin.Skydome({
                scene : scene
            });
            skydome.setEnvironmentMap(texture);

            var control = new clay.plugin.OrbitControl({
                target : camera,
                domElement : renderer.canvas,
                sensitivity : 0.4
            });

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.on('frame', function(deltaTime) {
                control.update(deltaTime);
                renderer.render(scene, camera);
            });

        </script>
    </body>
</html>